<template>
	<view class="main">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>
		<scroll-view show-scrollbar="false" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
			<view class="science" v-for="(item,index) in scienceList" :key="index" @click="goScience(item)">
				<view class="tit-img">
					<image src="../../static/home/one.png" mode=""></image>
					<view class="tit">
						<view class="tit-text">
							成都西南中医医院
						</view>
						<view class="">
							<text>11-7 10:51</text>
							<text></text>
						</view>
					</view>
				</view>
				<view class="item-img">
					<image :src="item.photoUrl" mode=""></image>
				</view>
				<view class="science-item">
					<view class="item-tit">
						<view class="">
							{{item.title}}
						</view>
						<view class="item-text">
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>

				</view>

			</view>

		</scroll-view>
	</view>
</template>

<script>
	import {
		getactivity
	} from '../../service/api.js'
	export default {
		computed: {
			
			count() {
			      return this.$store.state.count // 访问 Vuex 中的 state
			}
		
		},
		data() {
			return {
				title: "活动通知",
				scienceList: []
			}
		},
		onLoad() {
			this.getlistDep()
		},
		methods: {
			goScience(item) {
			    if (this.count > 0) {
			        // 递减计数
			        this.$store.commit('decrement');
			    }
			
			    console.log(this.count, "这里是否将值减去");
			
			    
			
			    // 跳转到新的页面
			    uni.navigateTo({
			        url: `/integration/scienceDetails/index?id=${item.id}`
			    });
			},
			//获取消息列表
			async getlistDep() {
				let res = await getactivity();
				if (res.code == 200) {
					this.scienceList = res.rows;

				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F3F0;
		// padding: 24rpx;
		padding-top: 190rpx;

		.title {
			background: #fff;
			position: fixed;
			top: 0;
			z-index: 10;
			left: 0;
			width: 100%;
		}
	}

	.scroll-Y {
		height: calc(100vh - 235rpx);

		.science {
			background: #fff;
			margin-bottom: 24rpx;
			margin: 24rpx;
			padding: 24rpx;
			border-radius: 16rpx;

			.tit-img {
				display: flex;
				align-items: center;

				image {
					width: 72rpx;
					height: 72rpx;
					margin-right: 15rpx;
				}

				.tit {
					.tit-text {
						// font-weight: 600;
						font-size: 32rpx;
						color: #000000;
					}

					text {
						font-size: 24rpx;
						color: #808080;
						line-height: 28rpx;
					}
				}
			}
		}
	}

	.bot-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #B3B3B3;
		margin-top: 16rpx;

		.people {
			image {
				width: 24rpx;
				height: 17rpx;
			}
		}
	}

	.science-item {
		display: flex;
		align-items: center;
		justify-content: space-between;


		.item-tit {
			width: 654rpx;

			view:first-child {
				font-weight: 500;
			}

			view:last-child {
				margin-top: 8rpx;
				white-space: nowrap;
				/* 禁止换行 */
				overflow: hidden;
				/* 隐藏溢出的内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */

				font-size: 24rpx;
				color: #4D4D4D;
				width: 654rpx;
			}
		}



	}

	.item-img {
		width: 654rpx;
		height: 300rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin: 24rpx 0;

		image {
			width: 654rpx;
			height: 300rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	
	.item-text {
		margin-top: 15rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #808080;
		width: 600rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		
		padding-bottom: 8rpx;
		
		
	}
</style>